import React from 'react'
import {Slider} from "antd-mobile";
import PrettyMonsterIcon from "../../../../../../../../res/images/web/live-room/pretty-monster-icon.png";

const PrettySlider = props => {

    const {
        title,
        prettyValue,
    } = props

    const t = (
        <div className='flex-space-between-align-center mg-b-2'>
            <div style={{width: '15%'}}>
                <p className="sub-title">{title}</p>
            </div>
            <div style={{width: '70%',}}>
                <Slider
                    // value={50}
                    defaultValue={50}
                    style={{width: '145px', margin: '0 auto'}}
                    trackStyle={{
                        backgroundColor: 'rgba(250,114,104,1)',
                        borderRadius: '2px',
                        height: '2px',
                    }}
                    railStyle={{
                        background: 'rgba(243,243,243,0.2)',
                        borderRadius: '2px',
                        height: '2px',
                    }}
                    handleStyle={{
                        zIndex: 9999,
                        borderRadius: '0',
                        border: 'none',
                        height: '22px',
                        width: '38px',
                        marginLeft: '-11px',
                        // marginTop: '-19px',
                        background: `no-repeat url(${PrettyMonsterIcon})`
                    }}

                />
            </div>
            <div style={{width: '15%'}}>
                {50}%
            </div>
        </div>
    )

    return t

}

export default PrettySlider
